<template>
  <div class="analysis-list">
    <a-form layout="inline" class="default-search-form gb-flex-form" :form="form" @submit="handleSearch">
      <a-row :gutter="8">
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="分析状态">
            <DictSelector dictCode="ANALYSIS_STATUS" :i18n="false" v-decorator="['analysisStatus', { initialValue: ['WAITING', 'PROCESSING'] }]" placeholder="分析状态" mode="multiple" />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="受检者">
            <a-input v-decorator="['sampleName']" placeholder="受检者"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="样本编号">
            <a-input v-decorator="['sampleCode']" placeholder="样本编号"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item class="gb-search-button">
            <a-button class="item" v-if="funcs['AnalysisSearch']" type="primary" html-type="submit">
              {{ $t(funcs['AnalysisSearch']) }}
            </a-button>
            <a-button type="primary" class="item" @click="handleReset">
              {{ $t('reset') }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="table-multiple-operations">
      <AnalysisCheck v-if="funcs['AnalysisCheck']" class="item" :text="$t(funcs['AnalysisCheck'])" :callback="handleSearch" />
    </div>

    <a-table :columns="columns"
      :rowKey="record => record.id"
      :dataSource="data"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      size="small"
      :scroll="{ x: 1000 }"
    >
      <div slot="long_column_ellipsis" slot-scope="text">
        <LongTableColumn>{{ text }}</LongTableColumn>
      </div>

      <div class="table-single-operations" slot="action" slot-scope="text, record">
        <Action :buttonInfo="buttonInfo" @actionWidth="handleActionWidth" :funcs="funcs">
          <template  v-if="funcs['AnalysisTerminal']" slot="ViewControl">
            <AnalysisTerminal v-if="funcs['AnalysisTerminal']" class="item" :text="$t(funcs['AnalysisTerminal'])" :callback="handleSearch" displayType="LINK" :row="record" url="/backend/analysis/terminalProcessingAnalysis" />
          </template>
          <template  v-if="funcs['ViewControl']" slot="ViewControl">
            <AnalysisViewControl v-if="funcs['ViewControl']" class="item" :text="$t(funcs['ViewControl'])" displayType="LINK" :row="record" url="/backend/analysis/viewControlFile" />
          </template>
          <template  v-if="funcs['AnalysisBioFile']" slot="AnalysisBioFile">
            <FileSelector v-if="funcs['AnalysisBioFile']" class="item" :text="$t(funcs['AnalysisBioFile'])" displayType="LINK" :row="record" :callback="handleSearch" />
          </template>
          <template  v-if="funcs['AnalysisDownloadReport']" slot="AnalysisDownloadReport">
            <AnalysisDownloadReport v-if="funcs['AnalysisDownloadReport']" class="item" :text="$t(funcs['AnalysisDownloadReport'])" displayType="LINK" :row="record" :callback="handleSearch"  url="/backend/analysis/downloadReport" />
          </template>
          <template  v-if="funcs['AnalysisReqParam']" slot="AnalysisReqParam">
            <AnalysisReqParamView v-if="funcs['AnalysisReqParam']" class="item" :content="record.reqParam" :text="$t(funcs['AnalysisReqParam'])" />
          </template>
          <template  v-if="funcs['AnalysisUpload']" slot="AnalysisUpload">
            <AnalysisUploadFile v-if="funcs['AnalysisUpload']" class="item" :row="record" :text="$t(funcs['AnalysisUpload'])" />
          </template>
          <template  v-if="funcs['AnalysisPreviewReport']" slot="AnalysisPreviewReport">
            <AnalysisPreviewReport v-if="funcs['AnalysisPreviewReport']" class="item" :row="record" :text="$t(funcs['AnalysisPreviewReport'])" />
          </template>
        </Action>
      </div>
    </a-table>
  </div>
</template>
<script>
import axios from 'axios'
import common from '@/global/common.js'
import AnalysisReqParamView from "@/components/analysis/AnalysisReqParamView";
import AnalysisViewControl from "@/components/analysis/AnalysisViewControl";
import AnalysisCheck from "@/components/analysis/AnalysisCheck";

export default {
  components: {AnalysisCheck, AnalysisViewControl, AnalysisReqParamView},
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: true,
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {sortField: 'create_time', sortOrder: 'descend', ...common.getPagination()},
      actionWidth: 50,
    }
  },
  computed: {
    funcs() {
      return common.getVisibleFunc('AnalysisList')
    },
    columns() {
      const columns = [
        { title: "分析编号", dataIndex: 'analysisCode', sorter: true, key: 'analysis_code', width: 280, },
        { title: "样本编号", dataIndex: 'sampleCode', sorter: true, key: 'sample_code', width: 120, },
        { title: "样本类型", dataIndex: 'sampleTypeDesc', key: 'sample_type', width: 100},
        { title: "受检者姓名", dataIndex: 'sampleName', key: 'sample_name', width: 120,},
        { title: "性别", dataIndex: 'genderDesc', key: 'gender', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 50},
        { title: "年龄", dataIndex: 'age', key: 'age', width: 50, },
        { title: "检测项目", dataIndex: 'testMetaDesc', key: 'test_meta_desc', width: 100, },
        { title: "分析状态", dataIndex: 'analysisStatusDesc',sorter: true, key: 'analysis_status', width: 100},
        { title: "异常状态", dataIndex: 'errorMsg', key: 'error_msg', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155},
        { title: "质控结果", dataIndex: 'summaryResult', key: 'summary_result', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 155},
        { title: this.$t("create_date"), dataIndex: 'createTime', defaultSortOrder:'descend', sorter: true, key: 'create_time',width: 155},
        { title: this.$t("action"), key: 'action', scopedSlots: { customRender: 'action' }, width: this.actionWidth, fixed: 'right', }
      ]
      return columns
    },
    buttonInfo() {
      return {
        'AnalysisTerminal': 68,
        'ViewControl': 68,
        'AnalysisBioFile': 68,
        'AnalysisDownloadReport': 68,
        'AnalysisReqParam': 40,
        'AnalysisUpload': 40,
        'AnalysisPreviewReport': 68,
      }
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    handleActionWidth (data) {
      this.actionWidth = data
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return
        }
        if (formValue.analysisStatus) {
          formValue.analysisStatusList= formValue.analysisStatus.join()
          delete formValue.analysisStatus
        }

        this.loading = true
        axios({
          url: '/backend/analysis/find',
          method: 'get',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.pagination.total = res.data.total;
          this.data = res.data.rows;
        }).catch(() => {
          
        }).finally(() => {
          this.loading = false;
        })
      });
    }
  },
}
</script>
<style>
.analysis-list .ant-form-item-label {
  width: 80px;
}
</style>